import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Card, List, Avatar, Button } from 'antd'
class Message extends Component {
  render() {
    console.log(this.props.lists)
    return (
      <Card 
        title="消息中心"
        extra={ <Button danger>全部已读</Button> }  
      >
          <List
            itemLayout="horizontal"
            dataSource={this.props.lists}
            renderItem={item => (
              <List.Item
              actions={
                [
                  <Button size="small" type="primary" key="hasRead">已读</Button>, 
                  <Button size="small" danger key="del">删除</Button>
                ]}
              >
                <List.Item.Meta
                  avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                  title={ item.title }
                  description={item.content}
                />
              </List.Item>
            )}
          />
      </Card>
    )
  }
}
const mapStateToProps = (state)=>{
  return {
    lists: state.msg.lists
  }
}
export default connect(mapStateToProps)(Message)